<template>
    <div class="sign-avatar">
        <div class="avatar">
            <img class="avatar-img" :src="user.avatar">
            <div class="badge">
                <img class="badge-img" :src="userBadgeImg">
            </div>
        </div>
        <div class="detail">
            <div class="name">{{user.name}}</div>
            <div class="reason">{{user.reason}}</div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "SignAvatar",
        props: {
            user: {
                type: Object,
                default: () => {}
            },
            type: {
                type: String,
                default: '1'
            }
        },
        computed: {
            userBadgeImg() {
                let map = {
                    '1': require('../assets/image/early-1.png'),
                    '2': require('../assets/image/early-2.png'),
                    '3': require('../assets/image/early-3.png')
                };
                return map[this.type];
            }
        }
    }
</script>

<style lang="scss" scoped>
    .sign-avatar{
        width: 30vw;
        height: auto;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .avatar {
            width: 50/3.75+vw;
            height: 50/3.75+vw;
            position: relative;
            .avatar-img {
                width: 100%;
                height: 100%;
                border-radius: 50/3.75+vw;
                border: 4/3.75+vw solid #fff;
            }
            .badge {
                position: absolute;
                left: 50%;
                bottom: -15/3.75+vw;
                width: 74/3.75+vw;
                height: 22/3.75+vw;
                transform: translateX(-50%);
                z-index: 2;
                img {
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .detail {
            margin-top: 40/3.75+vw;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            .name {
                font-size: 16/3.75+vw;
            }
            .reason {
                font-size: 14/3.75+vw;
            }
        }
    }
</style>
